<template>
  <div>
    <div v-show="!Cshow">
    <x-header :left-options="{backText: ''}"></x-header>
    <p class="L_title">找回密码</p>

    <flow>
      <flow-state state="1" :title="('验证邮箱')" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2" :title="('修改密码')" is-done></flow-state>
      <flow-line :tip="('进行中')"></flow-line>
      <flow-state state="3" :title="('完成')"></flow-state>
    </flow>

    <group>
    <x-input title="输入密码" type="password" placeholder="请输入密码" v-model="psw" :min="6" :max="12" required ref="refpwd" >
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw.png" width="24" height="24">
    </x-input>
    <p class="L_tips">请输入6至12位的密码</p>
    <x-input title="确认密码" type="password" placeholder="再次输入密码" v-model="psw2" :equal-with="psw" required ref="refpwd2" >
      <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw2.png" width="24" height="24">
    </x-input>
    <p class="L_tips">确保密码输入正确</p>
    </group>
    <div class="L_butbox">
      <button id="L_bt" class="L_button" @click="C_show()" disabled>下一步</button>
    </div>
    <div class="L_foot">
      <router-link class="L_line" :to="'/Registered'"><span>没有账号？立即注册</span></router-link>
    </div>
    </div>

    <div v-show="Cshow">
    <x-header :left-options="{backText: ''}"></x-header>
    <p class="L_title">修改成功</p>
    <flow>
      <flow-state state="1" :title="('验证邮箱')" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2" :title="('修改密码')" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="3" :title="('完成')" is-done></flow-state>
    </flow>
    <div style="text-align: center;">
        <img src="static/img/success.png" alt=""><br><br><br>
        <button class="L_button1" @click="$router.replace('/Login')">前往登录</button>
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      psw: '',
      psw2: '',
      OK:false,
      Cshow:false,
    }
  },
  methods:{
    C_show(){
        this.Cshow=true;
    },
    keyDown(){//注册验证
    if(this.$refs.refpwd.valid == true&& this.$refs.refpwd2.valid == true && this.psw != ''&& this.psw2 != ''&&this.psw===this.psw2){
        this.OK = true;
    }else{
        this.OK = false;
    }
    },
    Btclass(){
    var L_btcolor =document.getElementById("L_bt");
    if(this.OK==true){//按钮可用
      L_btcolor.style.color = "white";
      L_btcolor.style.backgroundColor = "#008CBA";
      L_btcolor.disabled=false;
    }
    else if(this.OK==false){//按钮不可用
      L_btcolor.style.color = "grey";
      L_btcolor.style.backgroundColor = "rgba(211, 211, 211, 0.5)";
      L_btcolor.disabled=true;
    }
    },
  },
  mounted(){
  }, 
  updated(){
    this.keyDown();
    this.Btclass();
    
  }
}
</script>
<style lang="less" scoped>
.L_line{
text-decoration:none;  /*超链接无下划线*/
}
.L_title{
  font-size: 30px;
  margin-top: 50px;
  margin-left: 30px;
  margin-bottom: 50px;
}
.L_butbox{
  margin-top: 40px;
  text-align: center;
}
.L_button{
  color:grey;
  background-color:rgba(211, 211, 211, 0.5);
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
}
.L_button1{
  color:white;
  background-color:#008CBA;
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
  margin-top: 40px;
}
.L_foot{
  margin: 20px;
  text-align: center;
}
.L_tips{
  color: lightgray;
  margin-left: 50px;
  font-size: 14px;
}
</style>
